<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>前端</title>
<link href="https://cdn.bootcss.com/fullPage.js/2.8.0/jquery.fullPage.min.css" rel="stylesheet">
<link href="./index.css" rel="stylesheet">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.8.0/vendors/jquery.easings.min.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.8.0/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
	var video=document.getElementById("page1_back");
    $('#fullpage').fullpage({
		sectionsColor: ['#000', '#000','#000', '#7BAABE', '#f90'],
		anchors: ['page1', 'page2', 'page3', 'page4','page5'],
		loopBottom: true,
		navigation:true,
		navigationTooltips: ['欢迎', '项目：蓝莓派','项目：蓝莓派','项目：天融钱包','技能掌握'],
		slidesNavigation:false,
		easingcss3: 'ease-in-out',
		scrollingSpeed:600,
		afterRender:function(){
			video.play();
			setTimeout(function(){
				$(".page1-tit").fadeIn();
			},700);
		},
		afterLoad: function(anchorLink, index){
			if(index == 1){
				video.play();
			}
		},

    });
});
</script>
</head>
<body>
<div id="fullpage">
    <div class="section">
    	<video id="page1_back" poster="images/back-default.png" loop width="100%" height="100%">
    		浏览器不支持 推荐使用chrome浏览
    		<source src="videos/backvideo.mp4">
    	</video>
    	<div class="page1-tit">
    		<p class="page1-tit1">前 端 工 程 师</p>
    		<p class="page1-tit2">—— 苗 霖 · 简 历</p>
    	</div>
    	<a class="go-next" href="#page2"><img src="images/next.png"></a>
    </div>
    <div class="section">
    	<div class="page2-main">
    		<div class="bb-main">
				<img class="bb-login" src="images/bb-login.png">
    			<div class="bb-int">
    				<p>项 目 : 蓝莓派</p>
    				<div class="bb-text">
    					<p>
    						<span>2016.06-2016.07</span>
    						<span>开发环境：sublime、chrome</span>
    					</p>
    					<p>
    						项目描述：蓝莓派官网。用户发布自己的故事，或是上传自己的原创音乐、发布相关兴趣爱好的周边产品。用户间可问答互动、成立兴趣小组等。也可以在社区发布一些旅游日志或心情日记。
    					</p>
    					<p>
    						浏览器支持：IE9以上及标准浏览器
    					</p>
    					<p>
    						技术点描述：
    					</p>
    					<p>
    						1. 利用div+css进行布局，使用CSS3动画做过渡效果，让页面视觉效果更好。
    					</p>
    					<p>
    						2. 使用Angular库实现网站的整体框架，使用路由进行页面之间的切换，并用指令包装部分模块。
    					</p>
						<p>
							3. 引入jQuery库，简化使用原生JS的操作，实现页面的部分特效，包含焦点轮播图、导航栏列表效果等。
						</p>
						<p>
							4. 引入swiper库，实现各种轮播效果。
						</p>
						<p>
							5. 利用AJAX与后端交互，获取数据，做View适配，数据交互采取JSON的形式。
						</p>
						<p>
							6.登录页背景图大小使用cover属性，使其可以自适应窗口大小，背景图可替换。
						</p>
						<p>
							7.商品页商品分布采用瀑布流形式，使页面更加美观。
						</p>
						<p>
							8.文字及图片数据采用动态获取形式，便于网站维护及更新。
						</p>
						<p>
							9.用户评论及注册登录等表单提交动作使用正则进行判断，根据用户输入数据更改错误提示。
						</p>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="section">
    	<div class="page2-main">
    		<div class="bb2-main">
    			<p>蓝莓派</p>
    			<img class="bbindex-p1" src="images/bb-indexp1.png">
	       		<img class="bbindex-p2" src="images/bb-indexp2.png">
	       		<img class="bbindex-p3" src="images/bb-indexp3.png">
    		</div>
    	</div>
    </div>
    <div class="section">
       	<div class="page3-main">
       		<img class="tr-img" src="images/tr-index.png">
       		<div class="tr-int">
       			<p>项 目 : 天融钱包</p>
				<div class="tr-text">
					<p>
						<span>2016.03-2016.04</span>
						<span>开发环境：sublime、chrome</span>
					</p>
					<p>
						项目描述：天融钱包官网。主要为用户提供资金存储、可过滤排序收支明细、转账、便捷支付、银行卡绑定及个人理财服务等功能。
					</p>
					<p>
						浏览器支持：IE9以上及标准浏览器
					</p>
					<p>
						技术点描述：
					</p>
					<p>
						1. 利用div+css进行布局，使用CSS3动画做过渡效果，让页面视觉效果更好。
					</p>
					<p>
						2. 使用Angular库构建网站的整体框架及部分数据交互。
					</p>
					<p>
						3. 引入jQuery库，简化使用原生JS的操作，实现页面的部分特效，包含导航栏列表效果等。
					</p>
					<p>
						4. 使用正则判断表单数据是否符合要求，如有错误，出现错误提示。
					</p>
					<p>
						5. 利用AJAX与后端交互，获取数据，做View适配，数据交互采取JSON的形式。其中部分数据跨域，采用JSONP的形式处理。
					</p>
					<p>
						6.用户数据从后台动态获取，根据登入账户获取用户数据。
					</p>
					<p>
						7.解析URL进行不同页面部分非用户数据获取。
					</p>
				</div>
       		</div>
      	</div>
    </div>
    <div class="section">
    	<div class="page3-main">
    		<div class="skills">
    			<div class="s-left">
    				<div class="skill-con">
    					<p class="skill-tit">
    						技 能 掌 握
    					</p>
    					<div class="skill-text">
    						<p>
	    						1.熟悉W3C标准，掌握HTML5+CSS3等前端技术，能解决兼容性问题
    						</p>
    						<p>
    							2.精通面向对象的JavaScript开发，能实现模块封装，了解MVC等开发模式
    						</p>
							<p>
								3.熟悉主流web开发框架，jQuery、Angular、Bootstrap等	
							</p>
							<p>
								4.熟悉移动端开发及相关注意事项
							</p>
							<p>
								5.熟悉Mysql相关操作
							</p>
							<p>
								6.了解模块化开发，Seajs及Requirejs
							</p>
							<p>
								7.了解Grunt和Gulp的使用
							</p>
							<p>
								8.对UI及UE有一定的敏感度，熟练使用PS操作图形，能够迅速将PSD转为静态页面。
							</p>
							<p>
								9.了解PHP、nodjs、java，熟悉前后端交互流程
							</p>
    					</div>
    				</div>
    				<div class="bottom-logo">
			    		<img src="images/gulp.jpg">
			    		<img src="images/node.png">
			    		<img src="images/angular.jpg">
    					<img src="images/jquery.png">
    				</div>
    			</div>
    			<div class="s-right">
    				<img src="images/js.png">
		    		<img src="images/c3.jpg">
		    		<img src="images/boot.jpg">
		    		<img src="images/h5.jpg">
    			</div>
    		</div>
    	</div>
    	<div class="contact">
			<p><img src="images/tel.png">182 0128 3088</p>
			<p><img src="images/email.png">mozelar@163.com</p>
		</div>
    </div>
</div>

</body>
</html>



